<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
%>
<%@taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H5素材分享设置</title>
    <link rel="shortcut icon" href="favicon.ico"> 
    <link href="<%=path%>/hplus/css/bootstrap.min14ed.css?v=3.3.6" rel="stylesheet">
    <link href="<%=path%>/hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
    <link href="<%=path%>/hplus/css/style.min862f.css?v=4.1.0" rel="stylesheet">
    <link href="<%=path%>/hplus/css/animate.min.css" rel="stylesheet">
    
    <link href="<%=path%>/hplus/css/plugins/iCheck/custom.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.css">
    <link href="<%=path%>/css/marketing/s_style.css" rel="stylesheet">
    
    <link href="<%=path%>/hplus/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/colorpicker/css/bootstrap-colorpicker.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/cropper/cropper.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/switchery/switchery.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/nouslider/jquery.nouislider.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
    <link href="<%=path%>/hplus/css/plugins/clockpicker/clockpicker.css" rel="stylesheet">

    <style> 
        .radio label{
            padding-left: 0;
        }
        .col-sm-1{
                width: 9.333333%;
        }
        .s_progress_bar{
                width: 260px;
        }
        .s_x_color_bz{
                width: 260px;
			    height: 30px;
			    line-height: 30px;
			    margin-top: 20px;
			    overflow: hidden;
			    padding: 0;
			    position: absolute;
			    color: #999;
			    z-index: 99;
        }
        .s_current .s_x_color_bz {
		    color: #18a689;
		}
		
		.tishi{
            margin-top: 7px;
            
        }

        .alert{
            position:absolute;
            top: -15px;
            left: 8%;
            display:none;
        }
        .s_phone_bg{
        	background:url('<%=path%>/images/bg_phone.png') no-repeat;
        	background-size:100% 100%;
        	width:220px;
        	height:470px;
        }
        .header_bg{
			background:url(<%=path%>/images/marketing/phone_header_circle.jpg) no-repeat;
			width: 94%;
		    height: 8%;
		    padding-top: 8%;
		    background-size: 100% 100%;
		    margin-left: 2.9%;
		    margin-top: 19.5%;
		}
		.header_bg2{
			background:url(<%=path%>/images/marketing/phone_header_friend.jpg) no-repeat;
			width: 94%;
		    height: 8%;
		    padding-top: 8%;
		    background-size: 100% 100%;
		    margin-left: 2.9%;
		    margin-top: 19.5%;
		}
		.s_bg{
			background:url(<%=path%>/images/marketing/activity_success_bg.png) no-repeat;
			background-size:100% 100%;
			width: 94%;
			margin-left: 2.9%;
		}
		.s_line {
		    height: 4px;
		    margin-bottom: 20px;
		    overflow: hidden;
		    background: #18a689;
		}
		.s_padding{
		    padding-right: 10px;
            padding-left: 10px;
		}    
    </style>
</head>

<body class="gray-bg">
    <div class="wrapper wrapper-content">
        <div class="container-fluid">
		     <div class="row">
		        <!-- 步骤条 start -->
		        <!-- <div class="col-md-12"><h3><strong>创建H5图文素材</strong></h3></div> -->
		        
		        <!-- 步骤条 end -->
		        
		        <div class="ibox-content col-md-12">
			        
                    <form method="get" class="form-horizontal">
                        <div class="form-group">
                           <label class="col-sm-1 control-label"></label>
		                   <div class="col-sm-11 x_progress " style="width:900px;">
				             <div class="s_line">
				                <div class="s_progress_bar s_current" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
									<span class="sr-only_1">1</span>
									<p class="s_x_color_bz">H5页面设置</p >
								</div>
								<div class="s_progress_bar s_current" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
									<span class="sr-only_2">2</span>
									<p class="s_x_color_bz">H5页面收集信息设置</p >
								</div>
								<div class="s_progress_bar s_current" role="progressbar"
									 aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
									<span class="sr-only_3">3</span>
									<p class="s_x_color_bz">H5页面分享设置</p >
								</div>
				             </div>
				          </div>
				        </div>  
                    </form>
                    
                    <!-- 下半部分 start -->
                    <div class="col-sm-12 white-bg bottom">
                        <!-- 左侧 start -->
                        <div class="col-md-5">
                        
                          <div class="col-md-12 text-center" style="margin-bottom:15px">
                               <span id="shareToCircle" style="color:#18a689">分享到朋友圈</span>&nbsp;&nbsp;&nbsp;&nbsp;
                               <span id="shareToFriend">分享给好友</span>
                          </div> 
                        
				          <div class="col-md-4">
				          </div>
				          <!-- 分享到朋友圈 start -->
				          <div id="shareToCircleDiv" class="col-md-8 text-center preview_border s_phone_bg" style="padding:0px">
				             <div class="header_bg">
				             </div>
				             <div class="col-md-12 s_padding" style="margin-top:10px;">
				                <img class="col-md-2 s_padding" src="<%=path%>/logo.png">
				                <div class="col-md-10 text-left" style="padding-left:5px">
				                   <span>zhfeat</span>
				                   <div class="gray-bg col-md-12 s_padding" style="padding-top:5px;padding-bottom:5px;margin-top: 5px;">
				                       <img class="col-md-3 sharePic" style="width:30px;height:30px;padding:0px;margin-right:5px" src="<%=path%>/logo.png">
				                       <h6 class="col-md-9 shareName" style="padding:0px"></h6>
				                   </div>
				                </div>
				             </div>
				          </div>
				          <!-- 分享到朋友圈 end -->
				          
				          <!-- 分享给朋友 start -->
				          <div id="shareToFriendDiv" class="col-md-8 text-center preview_border s_phone_bg" hidden="" style="padding:0px;">
				             <div class="header_bg2">
				             </div>
				             <div class="col-md-12 gray-bg" style="width: 94%;height:71.5%;;margin-left: 2.9%;">
					             <div class="col-md-10 s_padding white-bg" style="margin-top:10px;padding-top:10px;padding-bottom: 5px">
					                <div class="col-md-12 text-left" style="padding:0px">
					                    <span class="shareName"></span>
					                </div>
					             
					                <div class="col-md-12 " style="padding-left:5px;padding-right:0px">
					                   <div class="col-md-9 s_padding text-left" style="padding:0px">
					                       <h6 class="col-md-12 introduction" style="padding:0px"></h6>
					                   </div>
					                   <img class="col-md-3 sharePic" style="width:30px;height:30px;padding:0px;margin-left:10px" src="<%=path%>/logo.png">
					                </div>
					             </div>
					             <img class="col-md-2" src="<%=path%>/logo.png" style="width:30px;height:30px;padding:0px;margin-top: 20px;margin-left: 18px;">
				             </div>
				             
				          </div>
				          <!-- 分享给朋友 end -->
				          <div class="col-md-2">
				          </div>
				       </div>
                       <!-- 右侧 start -->
                       
                       <div class="col-md-6">
				          <form action="" class="form-horizontal" id="uploadPic" enctype="multipart/form-data">
				              <div class="form-group">
			                     <label class="col-sm-4 control-label">分享标题</label>
			                     <div class="col-sm-6">
			                        <input id="shareName" type="text" class="form-control shareName"  maxlength="32" onblur="checkLength(this)" oninput="reloadUI()">
			                     </div>
			                  </div>
			                  <div class="form-group">
			                     <label class="col-sm-4 control-label">分享简介</label>
			                     <div class="col-sm-6">                      
			                        <textarea id="shareIntroduction" name="comment" class="form-control" placeholder="请输入文字" required="" aria-required="true" style="height:100px" maxlength="32" onblur="checkLength(this)" oninput="reloadUI()""></textarea>                       
			                     </div>
				              </div>
				              <div class="form-group">
		                         <label class="col-sm-4 control-label">分享图片</label>
			                     <div class="col-md-4">  
			                        <div class="x_img_sc"><img class="sharePic" src="<%=path%>/images/marketing/img_p.png" height="100px" width="100px"></div>    
			                     </div>
				              </div> 
				              <div class="form-group">
		                         <label class="col-sm-4 control-label"></label>
			                     <div class="col-md-3" style="width:20%">  
			                        <button type="button" class="btn btn-primary">选择图片</button>
			                        <input class="col-md-2 sharePic" accept="image/gif,image/jpeg,image/x-png"
														type="file" id="sharePic"
														onchange="uploadImage()" name="sharePic"
														style="filter: alpha(opacity = 50); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.0; position: absolute; z-index: 99;margin-top: -30px;">
			                     </div>
			                     <h6>请上传<3M的图片，建议尺寸180*180</h6>
				              </div> 
				              <div class ="form-group" style="margin-top: 30px;margin-bottom: 15px">
					              <label class="col-sm-4 control-label"></label>
					              <div col-sm-6>
						                <!-- <button id="preview" class="btn btn-outline btn-primary" onclick="javascript:previewMaterial();" style="margin-right:15px">预览</button> -->
				                        <button type="button" class="btn btn-outline btn-primary" id="lastStep" style="margin-right:15px">上一步</button>
				                       <!--  <button class="btn btn-outline btn-primary" id="btnPublish" style="margin-right:15px">发布</button> -->
				                        <button type="button" class="btn btn-primary" id="complete">完成</button>
					              </div>
			                        
			                  </div>
				          </form>
				       </div>
					    <!-- <div class ="col-sm-12 text-center" style="margin-top: 30px;margin-bottom: 15px">
	                        <button id="preview" class="btn btn-outline btn-primary" onclick="javascript:previewMaterial();" style="margin-right:15px">预览</button>
	                        <button class="btn btn-outline btn-primary" id="lastStep" style="margin-right:15px">上一步</button>
	                        <button class="btn btn-outline btn-primary" id="btnPublish" style="margin-right:15px">发布</button>
	                        <button class="btn btn-primary" id="complete">完成</button>
	                    </div> -->
                    </div>
                    
                </div>    
		     </div>
		</div>     
    </div>
        <!-- 立刻分享弹框 -->
   <div hidden="" class="modal inmodal fade" id="shareModal" tabindex="-1" role="dialog"  aria-hidden="true">
	    <div class="modal-dialog modal-sm">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	                <h4 class="modal-title">预览</h4>
	            </div>
	            <div class="modal-body text-center">
	               <div id="qrcode"></div>
	            </div>
	        </div>
	    </div>
	</div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/bootcdn/BootCDN/ajax/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/sweetalert/sweetalert2.min.js"></script>
    <script type="text/javascript" src="<%=path%>/js/marketing/dialog.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/public.js"></script>
	<script type="text/javascript" src="<%=path%>/js/marketing/lengthlimit.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
	<script src="<%=path%>/hplus/js/plugins/chosen/chosen.jquery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jsKnob/jquery.knob.js"></script>
    <script src="<%=path%>/hplus/js/plugins/jasny/jasny-bootstrap.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/datapicker/bootstrap-datepicker.js"></script>
    <script src="<%=path%>/hplus/js/plugins/prettyfile/bootstrap-prettyfile.js"></script>
    <script src="<%=path%>/hplus/js/plugins/nouslider/jquery.nouislider.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/switchery/switchery.js"></script>
    <script src="<%=path%>/hplus/js/plugins/ionRangeSlider/ion.rangeSlider.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/iCheck/icheck.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="<%=path%>/hplus/js/plugins/colorpicker/bootstrap-colorpicker.min.js"></script>
    <script src="<%=path%>/hplus/js/plugins/clockpicker/clockpicker.js"></script>
    <script src="<%=path%>/hplus/js/plugins/cropper/cropper.min.js"></script>
    <script src="<%=path%>/hplus/js/demo/form-advanced-demo.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/artDialog/7.0.0/dialog-plus.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
    
	<script type="text/javascript">
	    var sharePic="";//分享的图片
	    var id = 0;
	    var copyId = 0 ;
	    var handleType="";
	    var shareName="";
	    var shareIntroduction="";
	    var sharePic="";
	    var handleAction="";
	    var previewId;
	    var status = 0;
	    var materialType = 1;
	    var cid = 0;
	    $(function(){
	    	$('.tishi img').mouseover(function(){
                $(this).parent().find('.alert').show();
            });
            $('.tishi img').mouseout(function(){
                $(this).parent().find('.alert').hide();
            });
	    	$(".i-checks").iCheck({checkboxClass:"icheckbox_square-green",radioClass:"iradio_square-green",});
	    	handleType=getQueryString("handleType"); 
			id=getQueryString("id"); 
			copyId=getQueryString("copyId"); 
			previewId=getQueryString("previewId"); 
			if(handleType == "edit"){
				isCreate=true;
				getMaterialShareContent(id);
			}else if(handleType == "copy"){
				getMaterialShareContent(id);
			}else{
				getMaterialShareContent(id);
			}
	    });
	    /* 获取复制素材的信息 */
	    function getCopyMaterialShareContent(id){
	    	var url = "<%=path%>/material/ajaxGetMaterialDetail";
	        $.post(url, {
	        	"id":id,
	        }, function (data) {
	            if (data.status == "200") {
	            	var materialInfo=data.data;
	            	/* var materialName = materialInfo.name;
	            	shareName=materialInfo.shareName;
	            	if(!StringEmpty(shareName)){
	            		shareName = materialName;
	            	} */
	            	shareIntroduction=materialInfo.shareIntroduction;
	            	sharePic=materialInfo.sharePic;
	            	if(handleType != "copy"){
	            		status=materialInfo.status;
	            	}
	            	materialType = materialInfo.materialType;
	            	console.log("shareName--->"+shareName);
	            	/* $('#shareName').val(shareName); */
	            	$('#shareIntroduction').val(shareIntroduction);
	            	if(StringEmpty(sharePic)){
	            		$('.sharePic').attr("src",sharePic);
	            	}
	            	reloadUI();
	            } else {
	            	errorDialog(data.message);
	            }
	        });
	    }
	    
	    /* 获取内容 */
	    function getMaterialShareContent(id){
	    	var url = "<%=path%>/material/ajaxGetMaterialDetail";
	        $.post(url, {
	        	"id":id,
	        }, function (data) {
	            if (data.status == "200") {
	            	var materialInfo=data.data;
	            	var materialName = materialInfo.name;
	            	shareName=materialInfo.shareName;
	            	if(!StringEmpty(shareName)){
	            		shareName = materialName;
	            	}
	            	shareIntroduction=materialInfo.shareIntroduction;
	            	sharePic=materialInfo.sharePic;
	            	status=materialInfo.status;
	            	cid = materialInfo.cid;
	            	materialType = materialInfo.materialType;
	            	console.log("shareName--->"+shareName);
	            	$('#shareName').val(shareName);
	            	$('#shareIntroduction').val(shareIntroduction);
	            	if(StringEmpty(sharePic)){
	            		$('.sharePic').attr("src",sharePic);
	            	}
	            	reloadUI();
	            	if(handleType == "copy" && StringEmpty(copyId)){
	            		getCopyMaterialShareContent(copyId);
	            	}
	            	//设置默认错误图片
	    			imageLoadError();
	            } else {
	            	errorDialog(data.message);
	            }
	        });
	    }
	    /* 保存内容 */
	    function save(){
	    	shareName=$('#shareName').val();
        	shareIntroduction=$('#shareIntroduction').val();
        	if(handleAction == "publish"){
        		if(status == 0){
            		status = 1;
            	} 
        	}else{
        		if((status == 0 || status ==1) && handleAction == "complete"){
            		status = 1;
            	}else if(status != 0){
            		status = 4;
            	}
        	}
        	if(!StringEmpty(shareName)&&!StringEmpty(sharePic)&&handleAction == "lastStep"){
        		window.location.href="<%=path%>/material/materialCollectInfo?handleType=edit&id="+id+"&previewId="+previewId;
        	    return ;
        	}
        	
        	if(!StringEmpty(shareName)){
	    		errorDialog("请填写H5名称");
	    		return ;
	    	}
        	if(!StringEmpty(sharePic)){
	    		errorDialog("请上传H5图片");
	    		return ;
	    	}
	    	var url = "<%=path%>/material/ajaxUpdateMaterial";
	        $.post(url, {
	        	"id":id,
	        	"shareName":shareName,
	            "shareIntroduction": shareIntroduction,
	            "sharePic":sharePic,
	            "status":status,//状态为未发布
	        }, function (data) {
	            if (data.status == "200") {
	            	if(handleAction == "preview"){
	            		var path = window.parent.servicePath;
	            		var url = "";
	            		 if(materialType == 1){
	               		   url = path+"/material/teletextMtaerialPreview?materialId="+id+"&cid="+cid;
	          	   	    }else{
	          	   		   url = path+"/material/photoAlbumMaterialPreview?materialId="+id+"&cid="+cid; 	  
	          	   	    }
	            		showPreviewDialog(url);
	            	}else if(handleAction == "publish"){
	            		publishMaterial();
	            	}else if(handleAction == "lastStep"){
	            		window.location.href="<%=path%>/material/materialCollectInfo?handleType=edit&id="+id+"&previewId="+previewId;
	            	}else{
	            		window.location.href="<%=path%>/material/materialList";
	            	}
	            } else {
	            	errorDialog(data.message);
	            }
	        });
	    }
	    function showPreviewDialog(url){
			 var d = dialog({
					width: 140,
		 	        height:140,
		 	        align: 'top',
		 			content:"<div id='code'></div> <img src='' id='qrcodeImg' style='width:140px;height:140px;'/>"+
		 	        "<a id='download' download='qrcode.jpg'></a>"
		 	        ,
					quickClose: true// 点击空白处快速关闭
			 });
			 d.show(document.getElementById('preview'));
			 var qrcode = $('#code').qrcode({
				   width: 110,
				   height:110,
		           text:url+""/*可以通过ajax请求动态设置*/
		    	 }).attr("style","display:none;");
		     	//将生成的二维码转换成图片格式
			  var canvas = qrcode.find('canvas').get(0);
			  $('#qrcodeImg').attr('src', canvas.toDataURL('image/jpg'));
			  $(".ui-dialog").css("background-color" , "rgba(7, 17, 27, 0.3)"); 
		}
	    /* 预览 */
	    /* function previewMaterial(){
	    	var parse = parseUrl(window.location.href);  
    		var path = parse.protocol + '://' + parse.host + ':' + parse.port;
    		if("scrm_sps" == parse.segments[0]){
    			path +=  '/' + parse.segments[0];
    		}
    		
   		    if(materialType == 1){
     		   url = path+"/material/teletextMtaerialPreview?materialId="+id;
	   	    }else{
	   		   url = path+"/material/photoAlbumMaterialPreview?materialId="+id;		   	  
	   	    }
    		jQuery('#qrcode').qrcode(url);
       	    $('#shareModal').modal('show');
	    } */
	    /* 发布素材 */
	    function publishMaterial(){
	    	var url = "<%=path%>/material/ajaxPublishMaterial";
	        $.post(url, {
	        	"id":id,
	        }, function (data) {
	            if (data.status == "200") {
	            	var url = "<%=path%>/material/materialList";
	            	SuccessDialogByUrl("发布成功","素材已成功发布到全网",url)
	            } else {
	            	errorDialog("发布失败");
	            }
	        });
	    }
	    
	    /* 上传图片 */
	    var flag=false;
	    function uploadImage(){
	    	$("#uploadPic").submit(function (event) {  
		    	if(flag){
		    		return ;
		    	}
		    	flag=true;
		        $("#uploadPic").ajaxSubmit({
		            type: "post",
		            url: "${pageContext.request.contextPath}/api/uploadfile/file",
		            data:{"typename":"sharePic"},
		            success: function (data) {
		            	if(data.status == "200"){
		            		sharePic=data.realSavePath;
			            	$(".sharePic").attr('src',sharePic);
			            	//设置默认错误图片
			    			imageLoadError();
		            	} 
		            },
		            error: function (msg) {
		            	errorDialog("文件上传失败");
		            }
		        });
		        return false;
		    });
	    	flag=false;
	        $("#uploadPic").submit();
	    }
	</script>  
	<!-- 按钮点击  更新ui相关 -->
	<script type="text/javascript">
	     
		 $('#preview').click(function () {
			 handleAction="preview";
			 save();
		 });
		 $('#lastStep').click(function () {
			 handleAction="lastStep";
			 save();
		 });
		 $('#complete').click(function () {
			 handleAction="complete";
			 save();
		 });
		 
		 $('#btnPublish').click(function (){
			 handleAction="publish";
			 save();
		 });
	
	
	     //分享到朋友圈
		 $('#shareToCircle').click(function () {
			 $('#shareToCircle').css({"color":"#18a689"}); 
			 $('#shareToFriend').css({"color":"#676a6c"}); 
			 $('#shareToCircleDiv').show();
			 $('#shareToFriendDiv').hide();
			 
		 });
		 //分享给朋友
		 $('#shareToFriend').click(function () {
			 $('#shareToFriend').css({"color":"#18a689"}); 
			 $('#shareToCircle').css({"color":"#676a6c"}); 
			 $('#shareToCircleDiv').hide();
			 $('#shareToFriendDiv').show();
			 
		 });
		 //实时更新ui内容
		 function reloadUI(){
			 $('.introduction').html($('#shareIntroduction').val());
			 $('.shareName').html($('#shareName').val());
		 }
		 
	</script>  
</body>
</html>
